<template>
  <div id="time">
    <div style="width: 500px; margin: 0 auto">
      <el-row>
        <el-col :span="6">
          <div class="morning" title="早晨" @click="timeSet('morning')"></div>
        </el-col>
        <el-col :span="6">
          <div class="noon" title="中午" @click="timeSet('noon')"></div>
        </el-col>
        <el-col :span="6">
          <div class="evening" title="傍晚" @click="timeSet('evening')"></div>
        </el-col>
        <el-col :span="6">
          <div class="night" title="夜晚" @click="timeSet('night')"></div>
        </el-col>
      </el-row>
      <div class="bar">
        <div
          class="barpoint"
          :class="{
            morningPoint: currentType == 'morning',
            noonPoint: currentType == 'noon',
            eveningPoint: currentType == 'evening',
            nightPoint: currentType == 'night',
          }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentType: 'morning',
    };
  },
  mounted(){
    if(window.Sgworld){
      var temType = window.sessionStorage.getItem('timeType');
      this.currentType = temType?temType:'morning';
    }else{
      this.currentType = 'morning'
      window.sessionStorage.setItem('weatherType','sun')
    }
    window.sessionStorage.setItem('timeType',this.currentType)
    window.Sgworld&&window.Sgworld.execute("grapi", "settime", { type: this.currentType }, null);
  },
  methods: {
    // 设置时间
    timeSet(type) {
      if (type === this.currentType) {
        window.Sgworld.execute("grapi", "settime", { type: "morning" }, null);
        this.currentType = "morning";
      } else {
        window.Sgworld.execute("grapi", "settime", { type: type }, null);
        this.currentType = type;
      }
      window.sessionStorage.setItem('timeType',this.currentType)
    },
  },
};
</script>
<style scoped>
.bar {
  width: 410px;
  height: 20px;
  line-height: 20px;
  margin-left: 15px;
  margin-top: 20px;
  border-radius: 10px;
  position: relative;
  background: linear-gradient(
    to right,
    rgba(0, 132, 255, 0.25),
    rgba(0, 132, 255, 1)
  ) !important;
}
.barpoint {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -8px;
  left: 0;
  border-radius: 18px;
  /* border: 1px solid white; */
  background: white;
}
.morningPoint {
  left: 0;
}
.noonPoint {
  left: 31%;
}
.eveningPoint {
  left: 61%;
}
.nightPoint {
  left: unset;
  right: 0;
}
.morning,
.noon,
.evening,
.night {
  width: 63px;
  height: 66px;
  background: url("../../../static/images/modules/zc.png");
  cursor: pointer;
}
.noon {
  background: url("../../../static/images/modules/zw.png");
}
.evening {
  background: url("../../../static/images/modules/yw.png");
}
.night {
  background: url("../../../static/images/modules/bw.png");
}
</style>
